import React, { useEffect, useState } from 'react'
import { Box } from '$components';
import NoData from './public/noData';
import './style.less';
import { ApiTable, useFsRequest } from '$utils';
function HotspotData(props) {

    const { data: restfulInfo = {} } = useFsRequest({
        url: 'homepage/restful/info',
        pollingInterval: 1000 * 60,
        cacheKey: 'restfulInfo',
    });

    const top3 = restfulInfo?.top3
    return <Box title={"热点数据"} bodyPaddingTop={25}  >
        {top3?.length > 0 ?
            <div className='hotspot_data_container'>
                <div className='_img'></div>
                <div className='_top1'>
                    <span className='hotspot_title' title={top3[0].name}>{top3[0].name?.length > 8 ? top3[0].name.substring(0, 8) + '...' : top3[0].name}</span>
                    <div className='hotspot_data_number'>{top3[0].count}</div>
                </div>
                <div className='_top2'>
                    {top3?.length > 2 && <>
                        <span className='hotspot_title' title={top3[2].name}>{top3[2].name?.length > 8 ? top3[2].name.substring(0, 8) + '...' : top3[2].name}</span>
                        <div className='hotspot_data_number'>{top3[2].count}</div>
                    </>}
                </div>
                <div className='_top3'>
                    {top3?.length > 1 && <>
                        <span className='hotspot_title' title={top3[1].name}>{top3[1].name?.length > 8 ? top3[1].name.substring(0, 8) + '...' : top3[1].name}</span>
                        <div className='hotspot_data_number'>{top3[1].count}</div>
                    </>}
                </div>
            </div> : <NoData />
        }
    </Box>
}

export default HotspotData;


